<template>
  <div>
    <div v-show="!values || values.length == 0">
      <i class="el-icon-edit-outline" style="float: right"></i>
    </div>
    <div v-show="values && values.length > 0">
      <el-row v-for="(item, index) in values" :key="index">
        <el-col :span="10" v-show="!!item.value">
          <span style="color: red" v-show="item.isRequire">*</span
          ><span>{{ item.dimensionName }}</span></el-col
        >
        <el-col :span="14" v-show="!!item.value"
          ><span>{{ item.label || item.value }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      values: [],
    };
  },
  methods: {
    getValues() {
      let copyDatas = JSON.parse(JSON.stringify(this.dimensionItems));

      copyDatas.forEach((element) => {
        let matchValue = this.dimensionItemValues.find((x) => {
          return (
            x.dataSourceType == element.dataSourceType &&
            x.tagId == element.tagId
          );
        });
        element.value = matchValue ? matchValue.value : "";
        element.label = matchValue ? matchValue.label : "";
      });

      this.values = copyDatas;
    },
  },
  watch: {
    dimensionItems: {
      handler(value) {
        if (value) this.getValues();
      },
    },
    dimensionItemValues: {
      handler(value) {
        if (value) this.getValues();
      },
    },
  },
  mounted() {
    this.getValues();
  },
  props: {
    dimensionItemValues: {
      type: Array,
      default: () => [],
    },
    dimensionItems: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped></style>
